<#assign menuId=4>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>填写装箱单-${Application.systemName!}</title>
<meta
	content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'
	name='viewport'>
<!-- bootstrap 3.0.2 -->
<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- font Awesome -->
<link href="../css/font-awesome.min.css" rel="stylesheet"
	type="text/css" />
<!-- Ionicons -->
<link href="../css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="../css/AdminLTE.css" rel="stylesheet" type="text/css" />
<!--datetimepicker-->
<link rel="stylesheet" type="text/css" href="../css/datetimepicker/bootstrap-datetimepicker.min.css" />
<link href="../css/myself.css" rel="stylesheet" type="text/css" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
    vertical-align: middle;
}
.center_td{
	text-align: center;
}
.table tr th{
	text-align: center;
}
.pull-left{
	border-left: 6px solid #3882ff;
	padding-left: 5px;
}
.form-horizontal{
	margin: 15px 0 20px 0;
}
.inpt td{
    vertical-align: middle;
}
.inpt td input{
	width: 100%;
	height: 22px;
	border: 0;
	padding: 0 8px;
	text-align: center;
	font-size: 12px;
}
label{
	font-weight: normal;
}
.Label{
	font-size: 14px; 
	border-left: 6px solid #3882ff; 
	padding-left: 5px;
	margin-bottom: 10px;
}
.day_view span{
	margin-right: 20px;
}
</style>
</head>
<body class="skin-blue">
	<!-- header logo: style can be found in header.less -->
	<#include "../header.html"/>
	<div class="wrapper row-offcanvas row-offcanvas-left">
		<!-- Left side column. contains the logo and sidebar -->
		<#include "../menu.html"/>

		<!-- Right side column. Contains the navbar and content of the page -->
		<aside class="right-side">
			<section class="content-header">
				<h1>填写装箱单</h1>
			</section>
			<!-- Content Header (Page header) -->
			<section class="content">
				<div class="row">
					<div class="col-md-12">
						<div class="box"  style="padding: 20px;">
							<div class="clearfix center" style="margin-top: 10px">
								<span class="pull-left four-font">填写基本信息</span>
							</div>
							<div class="center">

								<form class="form-horizontal" role="form"
									id="encasement_add_form">
									<div class="form-group">
										<label class="col-md-1 control-label" for="ds_name">发货日期</label>
										<div class="col-md-4">

											<div class="input-group date form_datetime col-md-12">
												<input class="form-control" size="60" type="text"
													name="deliveryDate" value=""> <span
													class="input-group-addon"><span
													class="glyphicon glyphicon-th"></span></span>
											</div>
										</div>
										<label class="col-md-1 control-label" for="ds_host">物流公司</label>
										<div class="col-md-4">
											<input class="form-control" name="deliver" type="text"
												placeholder="" />
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-1 control-label" for="ds_host">物流单号</label>
										<div class="col-md-4">
											<input class="form-control" name="batchNo" type="text"
												placeholder="" />
										</div>
										<label class="col-md-1 control-label" for="ds_host"></label>
										<div class="col-md-4">
											
										</div>
									</div>
								</form>
								<script type="text/javascript">
								
								</script>
								<table class="table table-bordered" id="tab_encasement_add">
									<tbody>
										<tr class="left-text">
											<th width="9%">箱号</th>
											<th width="9%">箱子尺寸</th>
											<th width="9%">毛重</th>
											<th width="9%">净重</th>
											<th width="9%">颜色编码</th>
											<th width="9%">S</th>
											<th width="9%">M</th>
											<th width="9%">L</th>
											<th width="9%">XL</th>
											<th width="9%">合计</th>
											<th width="9%">删除</th>
										</tr>
<tr class="inpt"><td style="padding: 0"><input style="width: 100%; height: 100%; border: 0" name="pNo" type="text"/></td>
			<td style="padding: 0"><input style="width: 100%; height: 100%; border: 0" name="size" type="text"/></td>
			<td style="padding: 0"><input style="width: 100%; height: 100%; border: 0" name="grossWeight" type="text"/></td>
			<td style="padding: 0"><input style="width: 100%; height: 100%; border: 0" name="netWeight" type="text"/></td>
			<td style="padding: 0"><input style="width: 100%; height: 100%; border: 0" name="colorCode" type="text"/></td>
            <td style="padding: 0"><input style="width: 100%; height: 100%; border: 0" name="sAmount" type="text" /></td>
            <td style="padding: 0"><input style="width: 100%; height: 100%; border: 0" name="mAmount" type="text" /></td>
            <td style="padding: 0"><input style="width: 100%; height: 100%; border: 0" name="lAmount" type="text"/></td>
            <td style="padding: 0"><input style="width: 100%; height: 100%; border: 0" name="xlAmount" type="text" /></td>
            <td name="total">0</td>
            <td><div id="del_1" class="red_circle"><div></div></div></td></tr>
										<tr>
											<td colspan="11"><span id="xamount_sum_span">合计箱数：0箱</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>合计件数：<span id="count">0</span>件</span>
											</td>
										</tr>
										<tr>
											<td colspan="11" style="text-align: center"><a href="javascript:addRow(14)">+添加一行</a>
											</td>
										</tr>
										<tr>
											<td colspan="11"><div class="form-group textarea">
													<textarea class="form-control" name="memo" rows="" cols=""
														placeholder="备注"></textarea>
												</div></td>
										</tr>

									</tbody>
								</table>

								<div class="form-group">
									<label class="Label">历史装箱单记录</label>
									<table class="table table-bordered" id="tab_encasement_add">
										<tbody>
											<tr class="left-text">
												<th width="10%">箱号</th>
												<th width="10%">箱子尺寸</th>
												<th width="10%">毛重</th>
												<th width="10%">净重</th>
												<th width="10%">颜色编码</th>
												<th width="10%">S</th>
												<th width="10%">M</th>
												<th width="10%">L</th>
												<th width="10%">XL</th>
												<th width="10%">合计</th>
											</tr>
											<#assign totalSum = 0>
											<#list historyList as 	history>
											<tr>
												<td class="day_view" colspan="10">
													<label>发出日期：&nbsp;&nbsp;</label><span><#if history.deliveryDate??>${history.deliveryDate?string("yyyy-MM-dd")}</#if></span>
													
													<label>物流公司：&nbsp;&nbsp;</label><span>${history.deliver!}</span>	
													
													<label>物流单号：&nbsp;&nbsp;</label><span>${history.batchNo!}</span>	
												</td>
											</tr>
											<#list history.encasementItems as 	encasementItem>	
																		
											<tr class="center_td">
												<td>${encasementItem.pNo!}</td>
												<td>${encasementItem.size!}</td>
												<td>${encasementItem.grossWeight!}</td>
												<td>${encasementItem.netWeight!}</td>
												<td>${encasementItem.colorCode!}</td>
									            <td name="size">${encasementItem.sAmount!}</td>
									            <td name="size">${encasementItem.mAmount!}</td>
									            <td name="size">${encasementItem.lAmount!}</td>
									            <td name="size">${encasementItem.xlAmount!}</td>
									            <td name="total">${encasementItem.total!}</td>
								            </tr>
								            <#if encasementItem.total??>
								            <#assign totalSum =totalSum+ encasementItem.total>
								            </#if>
            								</#list>
											<tr name="amount">
												<td colspan="10"><span id="xamount_sum_span">合计箱数：${history.encasementItems?size}箱</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>合计件数：<span>${totalSum}</span>件</span>
												</td>
											</tr>
											</#list>								
										</tbody>
									</table>
								</div>
								
							</div>
							<div class="center">
								<button type="button" class="btn btn-primary"
									onclick="saveEncasement(0)" style="margin-right: 10px;">保存</button>
								
								<button type="button" class="btn btn-default" onclick="window.location.href='../productionorder/list'">取消</button>
							</div>
						</div>
						<!-- /.box -->


					</div>
					<!-- /.col -->

				</div>
				<!-- /.row -->

			</section>

			

		</aside>
		<!-- /.right-side -->
	</div>
	<!-- ./wrapper -->

	<!-- jQuery 2.0.2 -->
	<script src="../js/jquery.min.js"></script>
	<!-- Bootstrap -->
	<script src="../js/bootstrap.min.js" type="text/javascript"></script>
	<!-- AdminLTE App -->
	<script src="../js/AdminLTE/app.js" type="text/javascript"></script>
	<script src="../js/jquery.form.min.js"></script>
	<!--datepickes-->
	<script
		src="../js/plugins/datetimerpicker/bootstrap-datetimepicker.min.js"
		type="text/javascript"></script>

	<script
		src="../js/plugins/datetimerpicker/locales/bootstrap-datetimepicker.zh-CN.js"
		type="text/javascript"></script>

</body>
<script type="text/javascript">


$(function() {
    $('.form_datetime').datetimepicker({
    	format: 'yyyy-mm-dd hh:00',
       	language:  'zh-CN',  
        weekStart: 1,  
        todayBtn:  1,  
        autoclose: 1,  
        todayHighlight: 1,  
        startView: 2,  
        forceParse: 0,  
        showMeridian: 0,
        minView: 1,
        startDate: new Date()
    });
  
   
});
			
			
			
			
        function encasementAdd(id){
        	
        	$("#proofingPatternId").val(id);
        	$('#encasement_add').modal({
    			keyboard: true
    		});
        }
        function addRow(id){
			var len = $("#tab_encasement_add").find("tr").length -3;
			$("#tab_encasement_add tr:eq("+len+")").before('<tr class="inpt"><td style="padding: 0"><input style="width: 100%; height: 100%; border: 0" name="pNo" type="text"/></td>'+
			'<td style="padding: 0"><input style="width: 100%; height: 100%; border: 0" name="size" type="text"/></td>'+
			'<td style="padding: 0"><input style="width: 100%; height: 100%; border: 0" name="grossWeight" type="text"/></td>'+
			'<td style="padding: 0"><input style="width: 100%; height: 100%; border: 0" name="netWeight" type="text"/></td>'+
			'<td style="padding: 0"><input style="width: 100%; height: 100%; border: 0" name="colorCode" type="text"/></td>'+
            '<td style="padding: 0"><input style="width: 100%; height: 100%; border: 0" name="sAmount" type="text" /></td>'+
            '<td style="padding: 0"><input style="width: 100%; height: 100%; border: 0" name="mAmount" type="text" /></td>'+
            '<td style="padding: 0"><input style="width: 100%; height: 100%; border: 0" name="lAmount" type="text"/></td>'+
            '<td style="padding: 0"><input style="width: 100%; height: 100%; border: 0" name="xlAmount" type="text" /></td>'+
            '<td name="total">0</td>'+
            '<td><div id="del_'+len+'" class="red_circle"><div></div></div></td></tr>');
			$("#tab_encasement_add tr:eq("+len+")").find('input:gt(4)').change(calculate).focus(getValue);
			$("#del_"+len).click(function(){
				$(this).parent().parent().remove();
				getTotal();
				getPatternCnt();
			})
			getPatternCnt();
		}
        function getPatternCnt(){
        	$("#xamount_sum_span").text("合计箱数："+($("#tab_encasement_add").find("tr").length -4)+"箱");
        }
        function saveEncasement(opFlag){
        	if(!checkDate()) return false;
        	if(!checkDeliver()) return false;
        	if(!checkBatchNo()) return false;
        	if(!checkColorCode()) return false;
        	if(!checkCount()) return false;
        	var len = $("#tab_encasement_add").find("tr").length;
        	var dataList = [];
        	for(var i =1;i<len-3;i++){
				var data = {};
				for(var j=0;j<=9;j++){
					if(j<9){
						var name = $("#tab_encasement_add").find("tr").eq(i).find("td").eq(j).find("input").attr("name");
						var val = $("#tab_encasement_add").find("tr").eq(i).find("td").eq(j).find("input").val();
						
						data[name] =val;
					}else{
						data["total"] =$("#tab_encasement_add").find("tr").eq(i).find("td").eq(j).text();
					}
					
					
				}
				dataList.push(data);
			}
			console.log(dataList)
			$("#encasement_add_form").ajaxSubmit({  
	            type : "POST",  
	            url: "../encasement/insertEncasement",   
	            dataType : "json",  
	            data : {productionPatternId:${productionPatternId!},encasementItems:dataList,opFlag:opFlag},  
	            contentType : 'application/x-www-form-urlencoded; charset=UTF-8',  
	            success : function(map) {  
	            	 if(map.head.respCode=="0000000"){
		                	alert("保存成功");
		                	if(opFlag==0){
		                		window.location.href="add?productionPatternId=${productionPatternId!}";
		                	}else{
		                		window.location.href="../productionorder/list";
		                	}
		                	
		                }else{
		                	alert(map.body);
		                }
	            },  
	            error : function(map) {  
	                alert("出现错误，请刷新页面");  
	            }  
	  
	        }) 
        
        }
        
        function getTotal(){
        	var trs=$('[name=total]');
        	
			var total=0;
			for(var i=0;i<trs.length;i++){
				var count=trs.eq(i).html();
				if(count&&!isNaN(count)) count=parseInt(count);
				total+=count;
			}
			$('#count').html(total);
        }
        
        model={};
		
		function getValue(){
			model.value=$(this).val();
		}
        
        function calculate(){
        	
			var count=$(this).val();
			var tr=$(this).parent().siblings('[name=total]');
			var total=tr.html();
			if(count&&!isNaN(count)){
				count=parseInt(count);
				total=parseInt(total)+count;
			}else{
				if(count){
					$(this).val('');
					alert('请输入数字');
				}
			}
			if(model.value&&!isNaN(model.value))
				total-=model.value;
			tr.html(total);
			getTotal();
		}
        
        $(function(){
        	$('[name=deliveryDate]').blur(checkDate);
        	$("#tab_encasement_add tr:eq(1)").find('input:gt(4)').change(calculate).focus(getValue);
        })

        function checkDate(){
        	var deliveryDate=$('[name=deliveryDate]').val();
        	if(!deliveryDate){
        		alert('发货日期未填');
        		return false;
        	}
        	var reg=/^\w{4}-\w{2}-\w{2} \w{1,2}:\w{2}$/;
        	if(!reg.test(deliveryDate)){
        		alert('发货日期不符');
        		return false;
        	}
        	return true;
        }
        
        function checkDeliver(){
        	var deliver=$('[name=deliver]').val();
        	if(!deliver){
        		alert('物流公司为空');
        		return false;
        	}
        	return true;
        }
        
        function checkBatchNo(){
        	var batchNo=$('[name=batchNo]').val();
        	if(!batchNo){
        		alert('物流编号为空');
        		return false;
        	}
        	return true;
        }
        
        function checkColorCode(){
        	var inputs=$('[name=colorCode]');
        	for(var i=0;i<inputs.length;i++){
        		if(!inputs.eq(i).val()){
        			alert('第'+(i+1)+'行颜色编码为空');
        			return false;
        		}
        	}
        	return true;
        }
        
        function checkCount(){
        	var count=$('#count').html();
        	if(!count){
        		alert('合计件数为0');
        		return false;
        	}
        	return true;
        }
        

        </script>
</html>